﻿@{
    ViewBag.Title = "TreeView示例";     
}
<link href="@Url.Content("~/Themes/TreeView/jquery.treeview.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var tree='<ul>'
           +'<li  class="expandable">'
                +'<div class="hitarea expandable-hitarea"></div>'
                +'<span class="folder">Folder 1</span>'       
            +'</li>' 
            +'<li  class="expandable">'
                +'<div class="hitarea expandable-hitarea"></div>'
                +'<span class="folder">Folder 2</span>'       
            +'</li>'
            +'<li  class="expandable">'
                +'<div class="hitarea expandable-hitarea"></div>'
                +'<span class="folder">Folder 3</span>'       
            +'</li>'
        +'</ul>';
$(function(){
    $("#tree").append(tree);

    $("#tree").treeview();
});

$.fn.extend({
    treeview:function(){
        var binder = this;
        if(this.hasClass("hitarea")){
            binder = this.parent();
        }
        binder.find("li").each(function(){
            var container = $(this);
            $(this).children("div").bind("click",function(){
                if(container.hasClass("collapsable")){
                    container.removeClass("collapsable").addClass("expandable"); 
                    $(this).removeClass("collapsable-hitarea").addClass("expandable-hitarea");
                }
                else if(container.hasClass("expandable")){
                     container.removeClass("expandable").addClass("collapsable");   
                     $(this).removeClass("expandable-hitarea").addClass("collapsable-hitarea");
                } 
               container.children("ul").toggle();
               $(this).onexpand(container);
            });
            
        });
    },
    onexpand:function(container){
        //var container = this.parent();
        if(container.hasClass("collapsable")&&!container.hasClass("ajaxed")){            
            container.append(tree);
            container.addClass("ajaxed");
            container.treeview();
        } 
        
    }

});
</script>
<span id="tree" class="filetree treeview">

</span>
